<template>
  <el-dialog append-to-body
             custom-class="orderDistributionList"
             top="1vh"
             :close-on-click-modal="false"
             :destroy-on-close="true"
             :visible.sync="dialogVisible"
             :title="Title"
             :v-loading="loading"
             width="800px"
             @close="onClose">
    <el-form ref="form"
             :model="systemMsg"
             style=" padding-right: 40px;"
             label-width="130px">
      <el-form-item label="报警地点"
                    prop="deviceAddress">
        <span class="labelValue">{{ systemMsg.deviceAddress!==null ? systemMsg.deviceAddress: '-' }}</span>
      </el-form-item>
      <el-form-item label="报警时间"
                    prop="alertTime">
        <span class="labelValue">{{ systemMsg.alertTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
      </el-form-item>
      <el-form-item label="报警类型"
                    prop="alarmName">
        <span class="labelValue">{{ systemMsg.alarmName ? systemMsg.alarmName
          : '-' }}</span>
      </el-form-item>

      <el-form-item label="紧急程度"
                    prop="urgency">
        <el-radio-group v-model="systemMsg.urgency"
                        size="mini">
          <el-radio v-for="(item, index1) in urgencyList"
                    :key="'value' + index1"
                    :label="item.value"
                    border>
            {{
              item.label
            }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注"
                    prop="remarks">
        <el-input v-model="systemMsg.remarks"
                  type="textarea"
                  placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>

    <el-form ref="userForm"
             :model="UserForm"
             :rules="userRules"
             style=" padding-right: 40px;"
             label-width="130px">
      <el-form-item label="人员选择"
                    prop="selected">
        <el-select v-model="UserForm.selected"
                   multiple
                   filterable
                   clearable
                   placeholder="请选择人员"
                   style="width:100%"
                   @change="change($event)">
          <el-option v-for="item in userList"
                     :key="item.userId"
                     :label="item.trueName"
                     :value="item.userId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="warning"
                 plain
                 :loading="loading"
                 @click="onClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary"
                 plain
                 :loading="loading"
                 @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
moment.locale('zh-cn')
export default {
  props: {
    systemMsg: {
      type: Object,
      default: null
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const test = (rule, value, callback) => {
      const that = this
      if (that.UserForm.selected.length === 0 || that.UserForm.selected.length === '') {
        this.$message.error('请选择至少一个人')
        return false
      } else {
        callback()
        // 要执行的代码
      }
    }
    return {
      moment: moment,
      loading: false,
      // visible: false,
      queryParams: {
        status: 1
      },
      pagination: {
        pageSizeOptions: [10, 20, 30, 40, 100],
        total: 0,
        pageNum: 1,
        pageSize: 10
      },

      UserForm: { selected: [] },
      // systemMsg: {
      //   id: '',
      //   alarmName: '',
      //   deviceAction: '',
      //   deviceAddress: '',
      //   alertTime: '',
      //   urgency: 1,
      //   remarks: ''
      // },
      radioList: [
        {
          label: '实际报警',
          value: 1
        },
        {
          label: '误报报警',
          value: 2
        },
        {
          label: '隔离报警',
          value: 3
        }
      ],
      urgencyList: [
        {
          label: '较低',
          value: 0
        },
        {
          label: '普通',
          value: 1
        },
        {
          label: '紧急',
          value: 2
        },
        {
          label: '非常紧急',
          value: 3
        }
      ],
      userList: [],
      select: [],

      rules: {
        // urgency: [{ required: true, message: '请选择紧急程度', trigger: 'change' }]
      },
      userRules: {
        selected: [
          {
            validator: test
          }
        ]
      }
    }
  },
  computed: {
    Title() {
      return '工单确认'
    },
    ...mapState({
      systemMsgList: (state) => state.cim.systemMsgList
    })
  },
  // watch: {
  //   visible(val) {
  //     if (!val) {
  //       this.$refs['form'].resetFields()
  //     }
  //   }
  // },
  mounted() {
    this.getUser()
  },
  methods: {
    onClose() {
      this.loading = false
      // this.systemMsg = {}
      // this.dialogVisible = false
      this.$emit('close')
    },
    onSuccess() {
      // this.dialogVisible = false
      this.loading = false
      this.$emit('success')
    },
    change(e) {
      this.select = this.userList.filter((item) => e.some((ele) => ele === item.userId))
    },
    // reset() {
    //   this.loading = false
    // },

    // init(row) {
    //   const res = await this.$get('console/api/v1/alarm-job/alarm-base-infos', {
    //     alertId: row.id
    //   })
    //   const [item] = res.data.data
    //   this.$nextTick(() => {
    //     Object.keys(this.systemMsg).forEach((key) => {
    //       this.systemMsg[key] = row[key]
    //     })
    //     this.systemMsg.remarks = item.remarks || ''
    //     this.systemMsg.urgency = item.urgency || 1
    //     this.UserForm.selected = item.userIds || []
    //     this.systemMsg.alertTime = this.moment(this.systemMsg.alertTime).format('YYYY-MM-DD HH:mm:ss')
    //     console.log('row :>> ', this.systemMsg)
    //     this.getUser()
    //   })
    // },
    getUser() {
      const url = 'system/user/normal'
      this.$get(url)
        .then((data) => {
          this.userList = data.data.data.rows
        })
        .catch((e) => {
          this.$message.error('获取数据失败，请联系管理员')
        })
    },
    // 派发
    postUser(alarmJobId) {
      const list = []
      // let res1
      // let message
      for (const i in this.select) {
        const obj = {}
        obj.userId = this.select[i].userId
        obj.userName = this.select[i].username
        obj.jobId = alarmJobId || ''
        if (obj.userId) {
          list.push(obj)
        }
      }
      // const params = this.$util.deepClone(list)
      try {
        this.$postBody('console/api/v1/alarm-job/job-distribute', list)
      } catch (e) {
        this.loading = false
      }

      // message = '派发成功'
      // const arr = this.systemMsgList.filter((el) => el.equipmentCollect && el.equipmentCollect.id !== alarmJobId)
      // this.$store.commit('cim/resetMsg', arr)
      // this.$store.commit('cim/setListenupdate')
      this.$message.success('派发成功')

      this.loading = false
      this.onSuccess()
    },
    handleSubmit() {
      // console.log('this.systemMsgList :>> ', this.systemMsgList)
      this.loading = true

      if (this.UserForm.selected.length === 0) {
        this.$message.error('请选择派发人员')
        this.loading = false
        return false
      }
      try {
        this.$postBody('console/api/v1/alarm-job/create', {
          alertId: this.systemMsg.id,
          alarmLocation: this.systemMsg.deviceAddress,
          alarmOccurTime: moment(this.systemMsg.alertTime).format('YYYY-MM-DD HH:mm:ss'),
          urgency: this.systemMsg.urgency,
          remarks: this.systemMsg.remarks,
          alarmType: 1
        }).then((data) => {
          this.postUser(data.data.data.alarmJobId)
        })
        this.$message.success('生成工单成功')
      } catch (error) {
        this.loading = false
        console.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.orderDistributionList {
  background-image: url("~@/assets/popup-bg.png");
  background-size: 100% 100%;
  background-color: transparent;

  .el-dialog__header {
    border-bottom: none;

    .el-dialog__title {
      color: #81e8fe;
      position: absolute;
      left: 30px;
      top: 30px;
    }

    .el-dialog__headerbtn {
      background: none;
      background-image: url("~@/assets/exit.png");
      background-size: 100% 100%;
      width: 46px;
      height: 46px;
      top: 22px;
      right: 32px;
    }
  }
  .el-dialog__body {
    padding: 40px;
  }
}
/deep/.el-dialog__footer {
  padding-top: 0;
  padding-bottom: 50px;
  /deep/.dialog-footer {
    .buttonBox {
      margin-right: 30px;
    }
    .el-button {
      text-align: center;
      background: rgba(0, 185, 255, 0.3);
      border: 1px solid #11b3ff;
      border-radius: 2px;
      color: #ffffff;
      cursor: pointer;
    }
    .el-button:hover {
      background: #11b3ff;
    }
  }
}
/deep/.el-dialog__header {
  .el-dialog__title {
    color: #ffffff;
  }
}

/deep/.el-input-group__append,
/deep/.el-input-group__prepend {
  color: #00b1d6;
  background: rgba(0, 177, 214, 0.18);
  border: 1px solid rgba(0, 177, 214, 1);
}

/deep/.el-input__inner,
/deep/.el-textarea__inner {
  border: 1px solid rgba(0, 177, 214, 1);
  background: rgba(0, 177, 214, 0.18);
  color: #fff;
}

/deep/.el-form-item__label {
  color: #fff;
}
/deep/.el-radio__label {
  color: #fff;
}
.labelValue {
  color: #fff;
}
</style>
